<template>
    <div class="user-cell van-hairline--bottom" @click="$emit('click')">
        <div class="user-cell-icon">
            {{userName}}
        </div>
        <div class="user-info">
            <p class="user-name">
                {{userName}}
            </p>
            <p class="user-org">
                {{orgName}}
            </p>
        </div>
        <div class="right-content">
            <slot></slot>
            <van-icon class="right-arrow" name="arrow"></van-icon>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UserCell",
        props:{
            isLink:{
              type:Boolean,
              default:false,
            },
            userName:{
                type:String,
                default:"熊浩"
            },
            orgName:{
                type:String,
                default:""
            }
        }
    }
</script>

<style scoped lang="less">
    .user-cell {
        &:active {
            background-color: #e8e8e8;
        }
        background: #fff;
        height: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 15px;
        .user-cell-icon {
            width: 40px;
            border-radius: 50%;
            height: 40px;
            text-align: center;
            line-height: 40px;

            background: #44bdf1;
            color: #fff;
            font-size: 12px;
        }
        .user-info{
            font-size: 16px;
            color: #333333;
            display: flex;
            flex-direction: column;
            margin-left: 15px;
            .user-org {
                font-size: 13px;
                color: #999999;
                margin-top: 2px;
            }
        }
        .right-content {
            margin-left: auto;
            color: #999;
            font-size: 14px;
            .right-arrow {
                font-size: 16px;
                margin-left: 8px;
            }
        }
    }
</style>